<template>
	<view class="clock">
		<clock-header :addressCode="addressCode" ></clock-header>
		<clock-address :address="address" @change="updateAddress" :distance="distance"></clock-address>
		<clock-card 
		@setgooutid="getgooutid"
		:address="address" 
		:gooutid="gooutid"
		:cardIndex="cardIndex" 
		:cardInfoArr="cardInfoArr"
		:addressCode="addressCode" 
		@change="updateCardInfo"
		></clock-card>
	</view>
</template>

<script>
	import clockHeader from './components/header.vue'
	import clockAddress from './components/address.vue'
	import clockCard from './components/card.vue'
	import qqMapWX from '@/common/qqmap-wx-jssdk.min.js'
	import amap from '@/common/amap-wx.js'
	//import amap from '../../common/amap-wx.js';  
	import {apiAddressCheck,apiCardInfo} from '@/common/api.js'
	export default{
		name:"clock",
		components:{
			clockHeader,
			clockAddress,
			clockCard
		},
		data(){
			return {
				key:'TVVBZ-SNEWW-ZN4RD-OMA43-HMO7O-U4BIN',
				address:'请获取位置',
				pois:null,
				addressCode:1,
				cardIndex:0,
				gooutid:"",
				cardInfoArr:{},
				distance:{
					distance:"",
					range:""
				}
			}
		},
		onShow() {
			let that = this
			let result = plus.navigator.checkPermission('LOCATION')
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
			if(result == 'denied'){
				setTimeout(()=>{
					uni.hideLoading()
					uni.redirectTo({
						url: './positionerr'
					});
				},1500)
			}else{
				that.getAddress((res)=>{
					uni.hideLoading()
					if(!res){
						this.toast('当前位置不在范围内，请更新位置')
					}
				})
				that.cardInfo()
			}
		},
		onLoad() {
			// uni.getLocation({
			// 	type:'gcj02'
			// })
		},
		methods:{
			getgooutid(){
				this.gooutid=''
				this.getAddress((res)=>{
					this.toast('外勤状态结束','success')
				})
				this.cardInfo()
			},
			//获取位置信息
			getAddress(callback){
				let that = this
				 // 实例化API核心类
				const myAmapFun = new amap.AMapWX({ 
				  key:'e9d0a4648b507b32c3c383e5139834fc' 
				});
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						myAmapFun.getRegeo({
						location: res.longitude + "," + res.latitude,
						// location:'113.258149,23.058699',
						success:function (data) {
							const user_info = uni.getStorageSync('user_info')
							that.address = data[0].regeocodeData.formatted_address
							apiAddressCheck({
								'coordinate': res.longitude + ',' + res.latitude,
								// 'coordinate':'113.258149,23.058699',
								'userId': user_info.userid
							}).then(res=>{
								that.distance=res.data
								if(res.data.code=="10005"){
									that.addressCode = 1
									callback && callback(false)
								}else{
									that.addressCode = 2
									callback && callback(true)
								}								
							}).catch(err=>{
								if(err.data.errorCode=="10008"){
									that.gooutid = err.data.msg.split("-")[1]
									that.addressCode = 3
									callback && callback(false)
								}else{								
									that.addressCode = 1
									callback && callback(false)
								}
							})
						}
						})
					}
				});
						
			},
			//获取打卡信息
			cardInfo(callback){
				let that = this
				apiCardInfo().then((res)=>{
					if(res.data.code == 20000 && res.data.data != null){
						that.cardInfoArr = res.data.data
						that.cardIndex = res.data.data.hr_attend_control + 1
					}else{
						that.cardIndex = 0
					}
					callback && callback(true)
				})
			},
			//更新位置
			updateAddress(){
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				that.getAddress((res)=>{
					uni.hideLoading()
					this.toast('更新成功','success')				
				})  
			},
			//更新打卡信息
			updateCardInfo(){
				setTimeout(()=>{
					uni.showLoading({
						title: '更新中...',
						mask: true
					});
					this.cardInfo((res)=>{
						uni.hideLoading()
					})
				},1400)
			},
			toast(title,icon='none'){
				uni.showToast({
					title: title,
					mask: true,
					icon:icon,
					duration: 1500
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.clock{
		height: 100%;
		background-color: $uni-bg-color;
		
	}
</style>
